<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>队员信息 - 排球队</title>
    <link rel="stylesheet" href="../../../css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .players-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        
        .page-header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .page-title {
            font-size: 2.5rem;
            color: #333;
            margin-bottom: 10px;
        }
        
        .page-subtitle {
            color: #666;
            font-size: 1.1rem;
        }
        
        .filters-section {
            background: white;
            padding: 25px;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .filters-row {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            align-items: center;
        }
        
        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .filter-label {
            font-weight: bold;
            color: #333;
            font-size: 0.9rem;
        }
        
        .filter-select {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background: white;
            min-width: 120px;
        }
        
        .search-box {
            flex: 1;
            min-width: 200px;
        }
        
        .search-input {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }
        
        .players-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }
        
        .player-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }
        
        .player-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        
        .player-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 3rem;
        }
        
        .player-info {
            padding: 20px;
        }
        
        .player-name {
            font-size: 1.3rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        
        .player-number {
            color: #667eea;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .player-position {
            background: #f0f0f0;
            color: #666;
            padding: 4px 8px;
            border-radius: 15px;
            font-size: 0.8rem;
            display: inline-block;
            margin-bottom: 10px;
        }
        
        .player-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 15px;
        }
        
        .stat-item {
            text-align: center;
            padding: 8px;
            background: #f8f9fa;
            border-radius: 5px;
        }
        
        .stat-value {
            font-weight: bold;
            color: #667eea;
            font-size: 1.1rem;
        }
        
        .stat-label {
            font-size: 0.8rem;
            color: #666;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 40px;
        }
        
        .page-btn {
            padding: 10px 15px;
            border: 1px solid #ddd;
            background: white;
            color: #333;
            text-decoration: none;
            border-radius: 5px;
            transition: all 0.3s ease;
        }
        
        .page-btn:hover,
        .page-btn.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }
        
        .stats-summary {
            background: white;
            padding: 25px;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
        }
        
        .summary-stat {
            text-align: center;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        .summary-number {
            font-size: 2rem;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 5px;
        }
        
        .summary-label {
            color: #666;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h3>排球队管理系统</h3>
            <button class="sidebar-toggle" onclick="toggleSidebar()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <nav class="sidebar-nav">
            <ul>
                <li>
                    <a href="../../index_qiu.html">
                        <i class="fas fa-home"></i>
                        首页
                    </a>
                </li>
                <li>
                    <a href="../about/about.html">
                        <i class="fas fa-info-circle"></i>
                        球队介绍
                    </a>
                </li>
                <li class="active">
                    <a href="list.html">
                        <i class="fas fa-users"></i>
                        队员信息
                    </a>
                </li>
                <li>
                    <a href="../matches/matches.html">
                        <i class="fas fa-trophy"></i>
                        比赛管理
                    </a>
                </li>
                <li>
                    <a href="../training/training.html">
                        <i class="fas fa-dumbbell"></i>
                        训练安排
                    </a>
                </li>
                <li>
                    <a href="../knowledge/index.html">
                        <i class="fas fa-book"></i>
                        排球知识
                    </a>
                </li>
                <li>
                    <a href="../notifications/detail.html">
                        <i class="fas fa-bell"></i>
                        通知管理
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        系统设置
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- 顶部导航栏 -->
        <div class="topbar">
            <div class="topbar-left">
                <button class="menu-toggle" onclick="toggleSidebar()">
                    <i class="fas fa-bars"></i>
                </button>
                <h1>排球队管理系统</h1>
            </div>
            <div class="switch-page">
                <button class="btn btn-secondary" onclick="switchToMainPage()">
                    <i class="fas fa-exchange-alt"></i> 流光小队
                </button>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content">
            <div class="players-container">
                <!-- 页面标题 -->
                <div class="page-header">
                    <h1 class="page-title">队员信息</h1>
                    <p class="page-subtitle">了解我们球队的每一位优秀队员</p>
                </div>

                <!-- 统计摘要 -->
                <div class="stats-summary">
                    <div class="stats-grid">
                        <div class="summary-stat">
                            <div class="summary-number">25</div>
                            <div class="summary-label">总队员数</div>
                        </div>
                        <div class="summary-stat">
                            <div class="summary-number">8</div>
                            <div class="summary-label">主攻手</div>
                        </div>
                        <div class="summary-stat">
                            <div class="summary-number">6</div>
                            <div class="summary-label">二传手</div>
                        </div>
                        <div class="summary-stat">
                            <div class="summary-number">5</div>
                            <div class="summary-label">副攻手</div>
                        </div>
                        <div class="summary-stat">
                            <div class="summary-number">4</div>
                            <div class="summary-label">自由人</div>
                        </div>
                        <div class="summary-stat">
                            <div class="summary-number">2</div>
                            <div class="summary-label">接应</div>
                        </div>
                    </div>
                </div>

                <!-- 筛选器 -->
                <div class="filters-section">
                    <div class="filters-row">
                        <div class="search-box">
                            <input type="text" class="search-input" placeholder="搜索队员姓名..." id="searchInput">
                        </div>
                        <div class="filter-group">
                            <label class="filter-label">位置</label>
                            <select class="filter-select" id="positionFilter">
                                <option value="">全部位置</option>
                                <option value="主攻手">主攻手</option>
                                <option value="二传手">二传手</option>
                                <option value="副攻手">副攻手</option>
                                <option value="自由人">自由人</option>
                                <option value="接应">接应</option>
                            </select>
                        </div>
                        <div class="filter-group">
                            <label class="filter-label">年级</label>
                            <select class="filter-select" id="gradeFilter">
                                <option value="">全部年级</option>
                                <option value="高一">高一</option>
                                <option value="高二">高二</option>
                                <option value="高三">高三</option>
                            </select>
                        </div>
                        <div class="filter-group">
                            <label class="filter-label">排序</label>
                            <select class="filter-select" id="sortFilter">
                                <option value="name">按姓名</option>
                                <option value="number">按号码</option>
                                <option value="position">按位置</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- 队员列表 -->
                <div class="players-grid" id="playersGrid">
                    <!-- 队员卡片将通过JavaScript动态生成 -->
                </div>

                <!-- 分页 -->
                <div class="pagination">
                    <a href="#" class="page-btn active">1</a>
                    <a href="#" class="page-btn">2</a>
                    <a href="#" class="page-btn">3</a>
                    <a href="#" class="page-btn">下一页</a>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 队员数据
        const players = [
            {
                id: 1,
                name: "王队长",
                number: "1",
                position: "主攻手",
                grade: "高三",
                height: "185cm",
                weight: "75kg",
                age: 18,
                experience: "3年",
                attackRate: "65%",
                serveRate: "78%",
                image: "👨‍🦱"
            },
            {
                id: 2,
                name: "李主攻",
                number: "2",
                position: "主攻手",
                grade: "高二",
                height: "182cm",
                weight: "72kg",
                age: 17,
                experience: "2年",
                attackRate: "62%",
                serveRate: "75%",
                image: "👨‍🦰"
            },
            {
                id: 3,
                name: "张二传",
                number: "3",
                position: "二传手",
                grade: "高三",
                height: "178cm",
                weight: "68kg",
                age: 18,
                experience: "3年",
                attackRate: "45%",
                serveRate: "82%",
                image: "👨‍🦲"
            },
            {
                id: 4,
                name: "刘副攻",
                number: "4",
                position: "副攻手",
                grade: "高二",
                height: "188cm",
                weight: "78kg",
                age: 17,
                experience: "2年",
                attackRate: "58%",
                serveRate: "70%",
                image: "👨‍🦳"
            },
            {
                id: 5,
                name: "陈自由人",
                number: "5",
                position: "自由人",
                grade: "高一",
                height: "175cm",
                weight: "65kg",
                age: 16,
                experience: "1年",
                attackRate: "30%",
                serveRate: "85%",
                image: "👨‍🦱"
            },
            {
                id: 6,
                name: "赵接应",
                number: "6",
                position: "接应",
                grade: "高三",
                height: "180cm",
                weight: "70kg",
                age: 18,
                experience: "3年",
                attackRate: "60%",
                serveRate: "76%",
                image: "👨‍🦰"
            },
            {
                id: 7,
                name: "孙主攻",
                number: "7",
                position: "主攻手",
                grade: "高一",
                height: "183cm",
                weight: "73kg",
                age: 16,
                experience: "1年",
                attackRate: "55%",
                serveRate: "72%",
                image: "👨‍🦲"
            },
            {
                id: 8,
                name: "周二传",
                number: "8",
                position: "二传手",
                grade: "高二",
                height: "176cm",
                weight: "67kg",
                age: 17,
                experience: "2年",
                attackRate: "42%",
                serveRate: "80%",
                image: "👨‍🦳"
            }
        ];

        // 渲染队员卡片
        function renderPlayers(playersToRender = players) {
            const grid = document.getElementById('playersGrid');
            grid.innerHTML = '';

            playersToRender.forEach(player => {
                const card = document.createElement('div');
                card.className = 'player-card';
                card.onclick = () => window.location.href = `detail.html?id=${player.id}`;
                
                card.innerHTML = `
                    <div class="player-image">${player.image}</div>
                    <div class="player-info">
                        <div class="player-name">${player.name}</div>
                        <div class="player-number">#${player.number}</div>
                        <div class="player-position">${player.position}</div>
                        <div style="color: #666; font-size: 0.9rem; margin-bottom: 10px;">
                            ${player.grade} | ${player.height} | ${player.weight}
                        </div>
                        <div class="player-stats">
                            <div class="stat-item">
                                <div class="stat-value">${player.attackRate}</div>
                                <div class="stat-label">扣球成功率</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-value">${player.serveRate}</div>
                                <div class="stat-label">发球成功率</div>
                            </div>
                        </div>
                    </div>
                `;
                
                grid.appendChild(card);
            });
        }

        // 筛选功能
        function filterPlayers() {
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
            const positionFilter = document.getElementById('positionFilter').value;
            const gradeFilter = document.getElementById('gradeFilter').value;
            const sortFilter = document.getElementById('sortFilter').value;

            let filteredPlayers = players.filter(player => {
                const matchesSearch = player.name.toLowerCase().includes(searchTerm);
                const matchesPosition = !positionFilter || player.position === positionFilter;
                const matchesGrade = !gradeFilter || player.grade === gradeFilter;
                
                return matchesSearch && matchesPosition && matchesGrade;
            });

            // 排序
            filteredPlayers.sort((a, b) => {
                switch(sortFilter) {
                    case 'name':
                        return a.name.localeCompare(b.name);
                    case 'number':
                        return parseInt(a.number) - parseInt(b.number);
                    case 'position':
                        return a.position.localeCompare(b.position);
                    default:
                        return 0;
                }
            });

            renderPlayers(filteredPlayers);
        }

        // 事件监听器
        document.getElementById('searchInput').addEventListener('input', filterPlayers);
        document.getElementById('positionFilter').addEventListener('change', filterPlayers);
        document.getElementById('gradeFilter').addEventListener('change', filterPlayers);
        document.getElementById('sortFilter').addEventListener('change', filterPlayers);

        // 侧边栏切换
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const isMobile = window.innerWidth <= 768;
            
            if (isMobile) {
                // 移动端：切换侧边栏显示/隐藏
                sidebar.classList.toggle('open');
            } else {
                // 桌面端：侧边栏始终可见，不需要切换
                console.log('桌面端侧边栏始终可见');
            }
        }

        // 切换页面
        function switchToMainPage() {
            window.location.href = '../../index.html';
        }

        // 窗口大小改变时处理侧边栏状态
        window.addEventListener('resize', function() {
            const sidebar = document.getElementById('sidebar');
            const isMobile = window.innerWidth <= 768;
            
            if (!isMobile) {
                // 桌面端：确保侧边栏可见
                sidebar.classList.remove('open');
            }
        });

        // 初始化页面
        renderPlayers();
    </script>
</body>
</html> 